<template>
  <div class="main-content">
    <div class="nain-box">
      <div class="left-box">文件名称</div>
      <div class="middle-box">{{data.scheme_name}}稳定性方案</div>
      <div class="right-box">
        <ul>
          <li>
            <div class="left-title">文件编号</div>
            <div class="middle-title">：</div>
            <div class="right-title">{{data.scheme_no}}</div>
          </li>
          <li>
            <div class="left-title">版 本 号</div>
            <div class="middle-title">：</div>
            <div class="right-title">{{data.version_no}}</div>
          </li>
          <li>
            <div class="left-title">页码</div>
            <div class="middle-title">：</div>
            <div class="right-title"></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'pageNumber',
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
      return {}
    },
    //是计算属性，也可以理解为一个方法。
    computed: {},

    //属性是手动定义的所需监听的值
    watch: {},

    //生命周期 - 创建完成（访问当前this实例）
    created() {
    },

    //生命周期 - 挂载完成（访问DOM元素）
    mounted() {
    },

    //是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，
    methods: {}

  }

</script>

<style scoped>
  .nain-box {
    width: 100%;
    height: 80px;
    border: 2px solid black;
    box-sizing: border-box;
    display: flex;
    flex-wrap: nowrap;
  }

  .left-box {
    width: 15%;
    border-right: 1px solid black;
    line-height: 80px;
    text-align: center;
  }

  .middle-box {
    width: 45%;
    border-right: 1px solid black;
    line-height: 80px;
    text-align: center;
  }

  .right-box {
    width: 40%;
  }

  ul, li {
    list-style: none;
    padding: 0 !important;
    margin: 0;
  }

  li {
    height: 26px;
    padding-right: 15px;
    padding-left: 15px;
    text-align: center;
    line-height: 26px;
    display: flex;
  }

  .left-title {
    width: 30%;
    padding-left: 20px;
    display: inline-block;
    text-align: justify;
    text-align-last: justify;
  }

  .middle-title {
    width: 2%;
  }

  .right-title {
    width: 68%;
    text-align: left;
    padding-left: 15px;
  }
</style>
